<template>
  <div class="">
    <div @click="initPlayer" class="c-w100 c-hh200 theme-bg c-fc-white c-fs24 c-flex-row c-flex-center">点击初始化播放器</div>
    <div id="myVideo" :class="[isRotated ? 'video-rotate-status':'']" style="background:#f60;">
    </div>

    <!-- <button @click="onSeekPlayer" class="btn-2">拖动到2小时</button> -->
    <!-- <video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
    </video> -->

  </div>
</template>

<script>

import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs1.js";
export default {
  name: "Test",
  data() {
    return {
      isRotated: false
    }
  },
  mounted() {

  },
  methods: {
    onSeekPlayer() {
      this.tcPlayer.currentTime(60 * 60 * 2)
    },
    initPlayer() {
      let videoObj = {
        videoMp4: {
          appID: "1256159786",
          fileID: "1397757896857679726",
          psign: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6MTI1NjE1OTc4NiwiZmlsZUlkIjoiMTM5Nzc1Nzg5Njg1NzY3OTcyNiIsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsicHJpdmF0ZUVuY3J5cHRpb25EZWZpbml0aW9uIjoxNH0sImltYWdlU3ByaXRlRGVmaW5pdGlvbiI6MTB9LCJkcm1MaWNlbnNlSW5mbyI6eyJtaW5pbXVtUHJvdGVjdGlvbkxldmVsIjoiU1RBTkRBUkQifSwiY3VycmVudFRpbWVTdGFtcCI6MTc0NDA4MzA0MywiZXhwaXJlVGltZVN0YW1wIjoxNzQ0MTQwNjQzLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI2N2Y1Nzk2MyIsInVzIjoiODNsOXhVRVhvSCIsImRvbWFpbiI6InR4dm9ka2V5MTI1Y3MuY2tqcmlvLmNvbSJ9LCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6Im5neWthM3d5In19.XgP1588RiNerNWv_dqSx5ezFGdBcgUSPTn2bMz6eyEE"
        },
        videoM3U8: {
          appID: "1256159786",
          fileID: "1397757896857679726",
          psign: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBJZCI6MTI1NjE1OTc4NiwiZmlsZUlkIjoiMTM5Nzc1Nzg5Njg1NzY3OTcyNiIsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiUHJvdGVjdGVkQWRhcHRpdmUiLCJkcm1BZGFwdGl2ZUluZm8iOnsicHJpdmF0ZUVuY3J5cHRpb25EZWZpbml0aW9uIjoxNH0sImltYWdlU3ByaXRlRGVmaW5pdGlvbiI6MTB9LCJkcm1MaWNlbnNlSW5mbyI6eyJtaW5pbXVtUHJvdGVjdGlvbkxldmVsIjoiU1RBTkRBUkQifSwiY3VycmVudFRpbWVTdGFtcCI6MTc0NDA4MzA0MywiZXhwaXJlVGltZVN0YW1wIjoxNzQ0MTQwNjQzLCJ1cmxBY2Nlc3NJbmZvIjp7InQiOiI2N2Y1Nzk2MyIsInVzIjoiODNsOXhVRVhvSCIsImRvbWFpbiI6InR4dm9ka2V5MTI1Y3MuY2tqcmlvLmNvbSJ9LCJnaG9zdFdhdGVybWFya0luZm8iOnsidGV4dCI6Im5neWthM3d5In19.XgP1588RiNerNWv_dqSx5ezFGdBcgUSPTn2bMz6eyEE"
        },
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg2.png',
        rotateScreenToggle: true, //是否开启伪全屏的旋转按钮
        playerCtx: this, //当前播放器的上下文
        rotateVideoCB() { //视频旋转回调（具体业务这里处理，this指向当前上下文）
          this.isRotated = true;
        },
        recoverRotateVideoCB() { //视频旋转恢复回调函数（具体业务这里处理，this指向当前上下文）
          this.isRotated = false;
        },
      }
      let dId = 'myVideo';
      this.tcPlayer = getXgplayer(dId, videoObj);
      this.tcPlayer.ready(() => {
        // this._initPlayerEvent(this.tcPlayer);
      })
      setTimeout(() => {
        this.tcPlayer.play();
      }, 1000);


      /* let tcConfig = {
        poster: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg2.png',
        posterImage: true,
        autoplay: true,
        bigPlayButton: false, //播放按钮是否显示
        controls: true, // Boolean
        controlBar: {
          QualitySwitcherMenuButton : false,
          volumePanel: false
        },
        playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
        loop: false,
        plugins: {}
      }
      this.tcPlayer = TCPlayer('player-container-id', tcConfig); // eslint-disable-line
      this.tcPlayer.src("https://1256159786.vod2.myqcloud.com/c23219d9vodtransgzp1256159786/445cc2603270835010326473777/v.f100230.m3u8"); // url 播放地址
  */
    },
  },
  beforeDestroy() {
    if (this.tcPlayer) {
      destoryPlayer(this.tcPlayer);
      // this.tcPlayer.dispose();
      this.tcPlayer = null;
    }
  }
}
</script>

<style scoped lang="scss">
// #myVideo {
//   transform-origin: center center;
// }
.btn-2 {
  position: fixed;
  left: 30px;
  top: 30px;
  z-index: 999999;
}
/deep/ {
  .video-rotate-status {
    // .video-js.vjs-fullscreen {
    //   width: 100vh !important;
    //   height: 100vw !important;
    // }
    // .vjs-tech{
    //   z-index: 1 !important;
    // }
    .vjs-control-bar {
      // visibility: visible !important;
      // z-index: 999999999 !important;
      // opacity: 1 !important;
      // background: #2b333f !important;
    }
  }
  .video-rotate {
    padding: 0 0.5em 0 0.2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .item-rotate {
    font-size: 1.8em;
  }
}
</style>